<template>
  <div class="content bg">
    <!-- 全屏容器 -->
    <dv-full-screen-container>

      <!-- 头部标题 -->
      <div class="module-box">
        <div style="flex: 0 1 30%;">
          <!-- 头部线条滑动 -->
          <dv-decoration-10 style="height:5px;" />
        </div>

        <div style="flex: 0 1 40%;">
          <!-- 三等分放标题 -->
          <div class="d-flex">
            <!-- 头部线条装饰 -->
            <dv-decoration-8 style="height:50px; flex: 1;" />
            <div style="flex: 1; text-align: center; line-height: 6vh; font-size: 20px; margin-top: 15px;">智慧工厂数据中心</div>
            <!-- 头部反向线条装饰 -->
            <dv-decoration-8 :reverse="true" style="height:50px; flex: 1;" />
          </div>
        </div>
        <div style="flex: 0 1 30%;">
          <!-- 头部反向线条滑动 -->
          <dv-decoration-10 style="height:5px; transform: rotate(180deg);" />
        </div>
      </div>


      <!-- 布局：三行三列 -->
      <div class="module-box">

        <div style="flex: 0 1 25%;">
          <dv-border-box-13 style=";height: auto;box-sizing: border-box; padding: 11px; ">
            <!-- 进度池 -->
            能源消耗进度
            <!-- <dv-percent-pond :config="config_jindu" style="width:100%;height:106px;" /> -->
            <Config_jindu></Config_jindu>
          </dv-border-box-13>
          <dv-border-box-7 style="height: auto; box-sizing: border-box; padding: 11px;">
            仓库库存量
            <!-- 胶囊图组件 -->
            <Config_jiaonang></Config_jiaonang>
            <!-- <dv-capsule-chart :config="config_jiaonang" style="width:100%;height:106px" /> -->
          </dv-border-box-7>

          <dv-border-box-2 style="height: auto; box-sizing: border-box; padding: 11px;">
            <!-- 水位图 -->
            设备运转负荷率
            <Config_shuiwei></Config_shuiwei>
            <!-- <dv-water-level-pond :config="config_shuiwei" style="width:100%;height:106px;" /> -->
          </dv-border-box-2>

        </div>

        <div style="flex: 0 1 50%;">
          <dv-border-box-10 style="width: 100%;height: 450px; box-sizing: border-box; ">
            <!-- 地图顶部边框 -->
            <div style="display: flex; font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;">
              <div style="flex:0 1 25%">
                <dv-border-box-12 class="toyi">
                  设备管理 88%
                </dv-border-box-12>
              </div>
              <div style="flex:0 1 25%">
                <dv-border-box-12 class="toyi">生产管理 93%</dv-border-box-12>
              </div>
              <div style="flex:0 1 25%">
                <dv-border-box-12 class="toyi">物流管理 78%</dv-border-box-12>
              </div>
              <div style="flex:0 1 25%">
                <dv-border-box-12 class="toyi">人员管控 89%</dv-border-box-12>
              </div>
            </div>
            <div style="font-size: 18px;">
              <!-- 主地图飞线图 -->
              设备数据统计
              <dv-flyline-chart :config="config_mainMap" style="width:100%;height:345px; " />
            </div>
          </dv-border-box-10>
        </div>

        <div style="flex: 0 1 25%;">
          <dv-border-box-7 style="height: auto; box-sizing: border-box; padding: 11px;">
            <!-- 锥形状图 -->
            销售额时间轴
            <dv-conical-column-chart :config="config_zhuixing" style="width:100%;height:183px;" />
          </dv-border-box-7>
          <dv-border-box-8 style="height: auto; box-sizing: border-box; padding: 11px;">
            <!-- 排名轮播表 单条滚动 -->
            车间设备能耗排行
            <dv-scroll-ranking-board :config="config_lunbo" style="width:100%;height:183px;" />
          </dv-border-box-8>
        </div>
      </div>

<!-- test -->
      <!-- 两行两列 -->
      <div class="module-box">

        <div style="flex: 0 1 50%; ">
          <dv-border-box-7 style="height: auto;height: 130px; box-sizing: border-box; ">
            <span>局部耗电量统计</span>
            <!-- 胶囊图 -->
            <LineCharts />
          </dv-border-box-7>
        </div>

        <div style="flex: 0 1 50%; ">
          <dv-border-box-13 style="height:auto;box-sizing: border-box; padding: 10px;">
            <!-- 轮播表 -->
            局部耗电量比重
            <dv-scroll-board :config="config_lunbobiao" style="width:100%;height:98px" />
          </dv-border-box-13>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
// @ is an alias to /src
import LineCharts from '../components/lineCharts.vue'
import Config_jiaonang from '../components/config_jiaonang.vue'
import Config_shuiwei from '../components/config_shuiwei.vue';
import Config_jindu from '../components/config_jindu.vue';

export default {
  name: 'HomeView.vue',
  data() {
    return {
      // 飞线图
      config_mainMap: {
        centerPoint: [0.48, 0.35],
        points: [
          {
            position: [0.52, 0.235],
            text: '新乡'
          },
          {
            position: [0.43, 0.29],
            text: '焦作'
          },
          {
            position: [0.59, 0.35],
            text: '开封'
          },
          {
            position: [0.53, 0.47],
            text: '许昌'
          },
          {
            position: [0.45, 0.54],
            text: '平顶山'
          },
          {
            position: [0.36, 0.38],
            text: '洛阳'
          },
          {
            position: [0.62, 0.55],
            text: '周口'
          },
          {
            position: [0.56, 0.56],
            text: '漯河'
          },
          {
            position: [0.37, 0.66],
            text: '南阳'
          },
          {
            position: [0.55, 0.81],
            text: '信阳'
          },
          {
            position: [0.55, 0.67],
            text: '驻马店'
          },
          {
            position: [0.37, 0.29],
            text: '济源'
          },
          {
            position: [0.20, 0.36],
            text: '三门峡'
          },
          {
            position: [0.76, 0.41],
            text: '商丘'
          },
          {
            position: [0.59, 0.18],
            text: '鹤壁'
          },
          {
            position: [0.68, 0.17],
            text: '濮阳'
          },
          {
            position: [0.59, 0.10],
            text: '安阳'
          }
        ],
        bgImgUrl: require('../assets/img/map.jpg'),
        centerPointImg: {
          url: require('../assets/img/mapCenterPoint.png')
        },
        pointsImg: {
          url: require('../assets/img/mapPoint.png')
        }
      },
      // 锥形状图
      config_zhuixing: {
        data: [
          {
            name: '周口',
            value: 55
          },
          {
            name: '南阳',
            value: 120
          },
          {
            name: '西峡',
            value: 71
          },
          {
            name: '驻马店',
            value: 66
          },
          {
            name: '新乡',
            value: 80
          },
          {
            name: '信阳',
            value: 35
          },
          {
            name: '漯河',
            value: 15
          }
        ],
        img: [
          require('../assets/img/1st.png'),
          require('../assets/img/2st.png'),
          require('../assets/img/3st.png'),
          require('../assets/img/4st.png'),
          require('../assets/img/5st.png'),
          require('../assets/img/6st.png'),
          require('../assets/img/7st.png'),
        ]
      },
      // 排名轮播表
      config_lunbo: {
        data: [
          {
            name: '周口',
            value: 55
          },
          {
            name: '南阳',
            value: 120
          },
          {
            name: '西峡',
            value: 78
          },
          {
            name: '驻马店',
            value: 66
          },
          {
            name: '新乡',
            value: 80
          },
          {
            name: '信阳',
            value: 45
          },
          {
            name: '漯河',
            value: 29
          }
        ]
      },
      //排名轮播表2
      config_lunbobiao: {
        data: [
          ['南阳', '4032kg', '4%'],
          ['周口', '2143kg', '2%'],
          ['漯河', '3292kg', '3%'],
          ['郑州', '7549kg', '7%'],
          ['长沙', '19323kg', '12%'],
          ['普宁', '3254kg', '33%'],
          ['广州', '83231kg', '23%'],
        ]
      }
    }
  },
  components: { LineCharts, Config_jiaonang, Config_shuiwei, Config_jindu }
}
</script>

<style scoped>
.toyi {
  height: 70px;
  text-align: center;
  line-height: 68px;
  margin-top: 1px;
  font-size: 20px;
}
</style>